<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/admins/css/bootstrap.css">
    <script src="/static/admins/js/jquery-2.1.0.js"></script>
</head>

<!-- 设置背景图片 -->
<body style="background:#fbf8ef;background-size:100%;">
<div class="container">
    <c:if test="${msg!=null}">
        <div class="alert alert-danger text-center">${msg}</div>
    </c:if>
    <form class="form-horizontal" action="/admin/toLogin" method="post" onsubmit="return checkLogin()" style="margin-top:15%;" >
        <h2 class="text-center">登录后台</h2>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <input type="text" class="form-control" style="height:auto;padding:10px;" placeholder="输入用户名"
                       name="userName" id="userName" onblur="checkName()">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <input type="password" class="form-control" style="height:auto;padding:10px;" placeholder="输入密码"
                       name="passWord" id="passWord" onblur="checkPass()">
            </div>
        </div>
        <div class="col-md-4 col-md-offset-4">
            <button class="btn btn-lg btn-success btn-block" type="submit">登录</button>
        </div>
    </form>
</div>

<script type="text/javascript">
    var username = false;
    var password = false;
    var reg = /[^A-z0-9]/;//正则表达式，由数字和字母组成
    //判断账号
    function checkName(){
        var userNameVal = document.getElementById('userName').value;//获取账户input中的内容
        //判断账号长度
        if (userNameVal.trim().length >= 2 && userNameVal.trim().length <=20){
            //判断是否为数字和字母组成
            if (!reg.test(userNameVal)){
                username = true;
            }else {
                alert("账号错误，账号应为数字和字母组成");
                username = false;
            }
        }else {
            alert("账号错误，长度应在2和20之间");
            username = false;
        }
    }
    //判断密码
    function checkPass(){
        var passWordVal = document.getElementById('passWord').value;//获取密码input中的内容
        //判断密码长度
        if (passWordVal.trim().length >= 2 && passWordVal.trim().length <=20){
            //判断是否为数字和字母组成
            if (!reg.test(passWordVal)){
                password = true;
            }else {
                alert("密码错误，密码应为数字和字母组成");
                password = false;
            }
        }else {
            alert("密码错误，长度应在2和20之间");
            password = false;
        }
    }
    function checkLogin(){
        if (username && password){
            return true;
        }else {
            return false;
        }
    }
</script>
</body>
</html>



